<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>数据分析</title>
    <meta charset="utf-8">
    <div id="dy"  style="height: 600px;width: 1100px;margin-top: 50px;margin-left:20px;">
        <div id="mainChart" style="border: 1px solid #438FB9; width:100%; height:45%;"></div>
    </div>
    <!-- 引入 ECharts 文件 -->
    <!--<script th:href="@{/static/js/admin/echarts.js}" src="/js/admin/echarts.js"></script>-->
    <script th:src="@{/static/layui/jquery.min.js}"></script>
    <script th:src="@{/static/js/admin/echarts.js}"></script>
</head>
<body>
<script type="text/javascript">
    //使用ajax加载数据
    $.ajax({
        method:'get',
        url:'/echartsData',
        dataType:'json',
        success:function(data){
            initChat(data);
        }
    });
    function initChat(data){
        var myChart = echarts.init(document.getElementById('mainChart'));
        option = {
            title : {
                text: '用户男女比例统计',
                subtext: '动态数据',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data
            },
            series : [
                {
                    name: '男女数量',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        },
            myChart.setOption(option);
    };
</script>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<!--<div id="main" style="width: 100%;height:615px;"></div>-->

<!--<script type="text/javascript">-->
<!--// 基于准备好的dom，初始化echarts实例-->
<!--var myChart = echarts.init(document.getElementById('main'));-->
<!--window.onresize = myChart.resize;-->
<!--var xData = function() {-->
<!--var data = [];-->
<!--for (var i = 1; i < 13; i++) {-->
<!--data.push(i + "月份");-->
<!--}-->
<!--return data;-->
<!--}();-->

<!--option = {-->
<!--backgroundColor: "#344b58",-->
<!--"title": {-->
<!--"text": "本年订单数量统计",-->
<!--x: "4%",-->

<!--textStyle: {-->
<!--color: '#fff',-->
<!--fontSize: '22'-->
<!--},-->
<!--subtextStyle: {-->
<!--color: '#90979c',-->
<!--fontSize: '16',-->

<!--},-->
<!--},-->
<!--"tooltip": {-->
<!--"trigger": "axis",-->
<!--"axisPointer": {-->
<!--"type": "shadow",-->
<!--textStyle: {-->
<!--color: "#fff"-->
<!--}-->

<!--},-->
<!--},-->
<!--"grid": {-->
<!--"borderWidth": 0,-->
<!--"top": 110,-->
<!--"bottom": 95,-->
<!--textStyle: {-->
<!--color: "#fff"-->
<!--}-->
<!--},-->
<!--"legend": {-->
<!--x: '4%',-->
<!--top: '11%',-->
<!--textStyle: {-->
<!--color: '#90979c',-->
<!--},-->
<!--"data": ['女', '男', '平均']-->
<!--},-->


<!--"calculable": true,-->
<!--"xAxis": [{-->
<!--"type": "category",-->
<!--"axisLine": {-->
<!--lineStyle: {-->
<!--color: '#90979c'-->
<!--}-->
<!--},-->
<!--"splitLine": {-->
<!--"show": false-->
<!--},-->
<!--"axisTick": {-->
<!--"show": false-->
<!--},-->
<!--"splitArea": {-->
<!--"show": false-->
<!--},-->
<!--"axisLabel": {-->
<!--"interval": 0,-->

<!--},-->
<!--"data": xData,-->
<!--}],-->
<!--"yAxis": [{-->
<!--"type": "value",-->
<!--"splitLine": {-->
<!--"show": false-->
<!--},-->
<!--"axisLine": {-->
<!--lineStyle: {-->
<!--color: '#90979c'-->
<!--}-->
<!--},-->
<!--"axisTick": {-->
<!--"show": false-->
<!--},-->
<!--"axisLabel": {-->
<!--"interval": 0,-->

<!--},-->
<!--"splitArea": {-->
<!--"show": false-->
<!--},-->

<!--}],-->
<!--"dataZoom": [{-->
<!--"show": true,-->
<!--"height": 30,-->
<!--"xAxisIndex": [-->
<!--0-->
<!--],-->
<!--bottom: 30,-->
<!--"start": 10,-->
<!--"end": 80,-->
<!--handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',-->
<!--handleSize: '110%',-->
<!--handleStyle: {-->
<!--color: "#d3dee5",-->

<!--},-->
<!--textStyle: {-->
<!--color: "#fff"-->
<!--},-->
<!--borderColor: "#90979c"-->


<!--}, {-->
<!--"type": "inside",-->
<!--"show": true,-->
<!--"height": 15,-->
<!--"start": 1,-->
<!--"end": 35-->
<!--}],-->
<!--"series": [{-->
<!--"name": "女",-->
<!--"type": "bar",-->
<!--"stack": "总量",-->
<!--"barMaxWidth": 35,-->
<!--"barGap": "10%",-->
<!--"itemStyle": {-->
<!--"normal": {-->
<!--"color": "rgba(255,144,128,1)",-->
<!--"label": {-->
<!--"show": true,-->
<!--"textStyle": {-->
<!--"color": "#fff"-->
<!--},-->
<!--"position": "insideTop",-->
<!--formatter: function(p) {-->
<!--return p.value > 0 ? (p.value) : '';-->
<!--}-->
<!--}-->
<!--}-->
<!--},-->
<!--"data": [-->
<!--2,-->
<!--1,-->
<!--2,-->
<!--3,-->
<!--5,-->
<!--0,-->
<!--0,-->
<!--0,-->
<!--0,-->
<!--0,-->
<!--0,-->
<!--0-->
<!--],-->
<!--},-->

<!--{-->
<!--"name": "男",-->
<!--"type": "bar",-->
<!--"stack": "总量",-->
<!--"itemStyle": {-->
<!--"normal": {-->
<!--"color": "rgba(0,191,183,1)",-->
<!--"barBorderRadius": 0,-->
<!--"label": {-->
<!--"show": true,-->
<!--"position": "top",-->
<!--formatter: function(p) {-->
<!--return p.value > 0 ? (p.value) : '';-->
<!--}-->
<!--}-->
<!--}-->
<!--},-->
<!--"data": [-->
<!--2,-->
<!--3,-->
<!--5,-->
<!--2,-->
<!--4,-->
<!--0,-->
<!--0,-->
<!--0,-->
<!--0,-->
<!--0,-->
<!--0,-->
<!--0-->
<!--]-->
<!--}, {-->
<!--"name": "总数",-->
<!--"type": "line",-->
<!--"stack": "总量",-->
<!--symbolSize: 10,-->
<!--symbol: 'circle',-->
<!--"itemStyle": {-->
<!--"normal": {-->
<!--"color": "rgba(252,230,48,1)",-->
<!--"barBorderRadius": 0,-->
<!--"label": {-->
<!--"show": true,-->
<!--"position": "top",-->
<!--formatter: function(p) {-->
<!--return p.value > 0 ? (p.value) : '';-->
<!--}-->
<!--}-->
<!--}-->
<!--},-->
<!--"data": [-->
<!--4,-->
<!--4,-->
<!--7,-->
<!--5,-->
<!--9,-->
<!--0,-->
<!--0,-->
<!--0,-->
<!--0,-->
<!--0,-->
<!--0,-->
<!--0-->
<!--]-->
<!--},-->
<!--]-->
<!--}-->

<!--myChart.setOption(option);-->
<!--</script>-->
</body>
</html>